<%@ include file="../views/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
	<script>
	function getYourPosition(){
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(
			onGetPositionSucess,
			onGetPositionError,
			{enableHighAccuracy: true, maximumAge: 30000, timeout:10000, }
		);
	}
	else {
		alert("Sorry, but it looks like yours browser does not support geolocation.");
	}
	}
	function onGetPositionSucess(position)
	{
	var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	var mapOptions =
	{
		zoom: 14,
		center: coords,
		mapTypeControl: false,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		mapTypeId: google.maps.MapTypeId.ROADMAP

	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	var marker = new google.maps.Marker({
			position: coords,
			map: map,
			title: "Your current location!"
			});
			}
	function onGetPositionError()
	{
		Alert("Cannot locate your position");
	}
			
		
	</script>
	<style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
</head>
<body onload="getYourPosition();" >
<div class="container">
 <!-- Carousel
================================================== -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="resources/img/bank1.jpg" alt="First slide">
        <div class="container">
          <div class="carousel-caption" >
            <h1 style="color:yellow ; font-family:verdana">BANK OF VIETNAM</h1> 
            <p style="font-family:courier; font-size:45; color:red">TOGETHER BELIEF TO  SUSTAINABLE FUTURE</p>    
             <p><a class="btn btn-lg btn-primary page-scroll" href="#product" role="button">Our Product</a></p>                 
          </div>
        </div>
      </div>
      <div class="item">
        <img src="resources/img/bank2.jpg" alt="Second slide">
        <div class="container">
          <div class="carousel-caption">
            <h1 style="color:yellow ; font-family:verdana">BANK OF VIETNAM</h1> 
            <p style="font-family:courier; font-size:45; color:red">INCREASE THE VALUE OF LIFE</p> 
             <p><a class="btn btn-lg btn-primary page-scroll" href="#information" role="button">Our Information</a></p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="resources/img/bank3.JPG" alt="Third slide">
        <div class="container">
          <div class="carousel-caption">
            <h1 style="color:yellow ; font-family:verdana">BANK OF VIETNAM</h1> 
            <p style="font-family:courier; font-size:45; color:red">SHARE OPPORTUNITY TO SUCCESSFUL COOPERATION</p> 
             <p><a class="btn btn-lg btn-primary page-scroll" href="#location" role="button">Location</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div><!-- /.carousel -->
 
 </div> <!-- End container -->
 
<div class="container">
    <h2 class="example-title" id="product">Products</h2>
    <div class="row">
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img  src="resources/img/card.jpg" >
            <div class="caption text-center">
              <h3 style="color:green">Promotion Card products</h3>
              <p>0% interest instalment plans for bank's Credit Cardholders shopping at thegioididong.com and dienmay.com</p>
              
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img  src="resources/img/business.jpg">
            <div class="caption text-center">
              <h3 style="color:green">Promotion Customer Premier</h3>
              <p>Whether you choose to invest directly or to seek advice, we have a range of products and services to help meet your needs</p>
              
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img class="img-rounded" src="resources/img/home-loans.jpg">
            <div class="caption text-center">
              <h3 style="color:green">Promotion Loan products</h3>
              <p >From buying a new car to simply consolidating finances, our customers can receive a representative* 3.9% APR</p>
              
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img class="img-rounded" src="resources/img/account.jpg">
            <div class="caption text-center">
              <h3 style="color:green">Promotion Deposit and Account </h3>
              <p>Enjoy fabulous rewards when applying for a Life Insurance policy today. Let's join with us to enjoy best service.</p>
              
            </div>
          </div>
        </div>
      </div>
 </div>

<div class="container">
	<h2 class="example-title" id="information">Information</h2>
	      <div class="row">
	  <div class="col-md-12">
		  <div class="timeline">
			  <dl>
				  <dt>Apr 2014</dt>
				  <dd class="pos-right clearfix">
					  <div class="circ"></div>
					  <div class="time">Apr 14</div>
					  <div class="events">
						  <div class="pull-left">
							  <img class="events-object img-rounded" src="resources/img/gold.jpg">
						  </div>
						  <div class="events-body">
							  <h4 class="events-heading">Gold Price</h4>
							  <p>Provides you with fast loading charts of the current gold price per ounce, gram and kilogram in 27 major currencies</p>
						  </div>
					  </div>
				  </dd>
				  <dd class="pos-left clearfix">
					  <div class="circ"></div>
					  <div class="time">Apr 10</div>
					  <div class="events">
						  <div class="pull-left">
							  <img class="events-object img-rounded" src="resources/img/exchage.jpg">
						  </div>
						  <div class="events-body">
							  <h4 class="events-heading">Exchange Rate</h4>
							  <p>This is a site devoted to bringing you the latest currency news, historical data, currency conversion and exchange rates, using mid-market rates updated minutely </p>
						  </div>
					  </div>
				  </dd>
				  <dt>Mar 2014</dt>
				  <dd class="pos-right clearfix">
					  <div class="circ"></div>
					  <div class="time">Mar 15</div>
					  <div class="events">
						  <div class="pull-left">
							  <img class="events-object img-rounded" src="resources/img/rate.jpg">
						  </div>
						  <div class="events-body">
							  <h4 class="events-heading">Interest Rate</h4>
							  <p>An interest rate is the rate at which interest is paid by a borrower (debtor) for the use of money that they borrow from a lender (creditor)</p>
						  </div>
					  </div>
				  </dd>
				  <dd class="pos-left clearfix">
					  <div class="circ"></div>
					  <div class="time">Mar 8</div>
					  <div class="events">
						  <div class="pull-left">
							  <img class="events-object img-rounded" src="resources/img/real-estate.jpg">
						  </div>
						  <div class="events-body">
							  <h4 class="events-heading">Real Estate</h4>
							  <p>A look at real estate investment in Vietnam from the perspective of property income, taxes and Vietnamese investment prospects.</p>
						  </div>
					  </div>
				  </dd>
	
			  </dl>
		  </div>
	  </div>
	</div>
</div>

<div class="container" id="location">
	<div class="row">
	<div class="col-sm-6 col-md-6">
	<div class="caption text-center">
	<h2>Where we work</h2>
	<div id="map_canvas" style="width:100%; height:315px" >
				</div>
	</div>
	</div>
	<div class="col-sm-6 col-md-6">
	<div class="caption text-center">
	<h2>About Us</h2>
	<video width="100%"  controls>
					<source src="http://api.twistage.com/videos/96250255552e8/play">
				</video>	
	
	</div>
	</div>
	</div>
</div>
</body>

</html>